import React,{useState,useEffect} from 'react'
import axios from '../api/axios'
import { ResultPage, Card ,Button,Popup,IndexBar, List ,Tag,SearchBar} from 'antd-mobile'
import { LoopOutline,LocationFill } from 'antd-mobile-icons'
import _ from 'lodash'
function City() {
 const [cityList,setCityList]=useState([])
      const [hotList,setHotList]=useState([])
       const [searchList,setSearchList]=useState([])
       const getList=async()=>{
        const result=await axios.get('/api/city')
        console.log(result);
        const{code,data}=result.data
        if(code==200){
            setCityList(data.city)
            setHotList(data.hotCities)
        }
       }
       useEffect(()=>{
        getList()

       },[]) 
       const searchData= _.debounce(async(wd)=>{
        if(wd==''){
            setSearchList([])
            return
        }else{
            const res =await axios.get('/api/city/search',{params:{wd}})
            console.log(res);
            const {code,data}=res.data
            setSearchList(data)
            
        }
       } ,1000)
  return (
    <div>
    <SearchBar placeholder='请输入内容' showCancelButton onChange={(val)=>searchData(val)} />
        {
            searchList.length>0 ?
            <div>
                <List>
                    {searchList.map((item,ind)=>(
                       <List.Item key={ind}>{item.name}</List.Item> 
                    ))}
        
      </List>
            </div>:<div>
              <Card  title={
           <div>
             {'当前城市'}{''}
             <LocationFill />
             {hotList.length>0 && hotList[0].name}
           </div>
        }></Card>
           <Card title='热门城市' >
          {hotList.length>0 && hotList.map((item,ind)=>(
              <Tag key={ind}>{item.name}</Tag>
          ))}
        </Card>   
            <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {cityList.length>0&&cityList.map((item,ind) => {
          return (
            <IndexBar.Panel
              index={item.initial}
              title={`${item.initial}`}
              key={`${item.initial}`}
            >
              <List>
                {item.list.map((item, index) => (
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>

        </div>
        }
        
      
    </div>
  )
}

export default City
